import React,{Component} from 'react';
import marked from 'marked'
import hljs from 'highlight.js'
import {Row,Col,Icon,BackTop} from 'antd';
import ArtliceMeun from "./ArtliceMeun"

export default class ShowArticle extends Component {

	constructor(props,context){
        super(props,context);
        this.state = {
            title:'',
            writer:'',
            data:'',
            articleContent:'',
            marks:[],
        }
    }
    componentDidMount(){
        let local = this.props.match.params.id;

        if(local){
            this.getIdArticle(local)
        }
        marked.setOptions({
            highlight: code => hljs.highlightAuto(code).value,
        });
    }
    getIdArticle(articleID){
        fetch(`/blog/article/${articleID}`).then(rep=>{
            return rep.json();
        }).then(json=>{
            let data = json.res;
            this.setState({
                title:data.articleTitle,
                writer:data.articleWriter,
                data:data.createdAt ? data.createdAt.substring(0,data.createdAt.indexOf('T')):'',
                articleContent:data.articleContent,
                marks:data.Marks,
            })
        })
    }

    render() {

        return (
            <div>
                <ArtliceMeun {...this.props} articleContent = {marked(this.state.articleContent) }/>
                <div className="articleConent">
                    <Row>
                        <Col>
                            <h1 className="title">{this.state.title}</h1>
                        </Col>
                    </Row>
                    <div style = {{textAlign:'center'}}>
                        <label>作者:</label>
                        <strong className="data">{this.state.writer}</strong>
                    </div>
                    <div style = {{textAlign:'center'}}>
                        <Icon type="calendar" theme="outlined" />
                        <strong className="data">{this.state.data}</strong>
                    </div>
                    <div className='articleShow' dangerouslySetInnerHTML={{ __html: marked(this.state.articleContent)}}/>
                    <BackTop visibilityHeight = {50}/>
                </div>
            </div>

    	)
    }
}

